qx.Class.define("lastfmbackup.view.StorageControlBar", {
  
  extend : lastfmbackup.view.AbstractButtonBar,
  
  construct : function()
  {
    this.base(arguments);
    
    this._element.find(".save-type-popup a").on("click", this._onTypeClick, this);
    q(document).on("click", function(event)
    {
      this._element.find(".save-type-popup").hide();
    }, this);
  },
  
  members : {
    
    _getTemplate : function()
    {
      var manager = qx.util.ResourceManager.getInstance(); 
      var save  = manager.toUri("lastfmbackup/icon/save.png");
      var clear = manager.toUri("lastfmbackup/icon/clear.png");
      
      return [
        "<div class='control-bar'>",
          "<button class='button-save action-button'><img src='{0}' alt='save'/></button>".format(save),
          "<div class='save-type-popup'>",
            "<a href='#' class='anchor-csv'>CSV</a>",
            "<br/>",
            "<a href='#' class='anchor-json'>JSON</a>",
          "</div>",
          "<button class='button-clear action-button'><img src='{0}' alt='clear'/></button>".format(clear),
        "</div>"
      ].join("");
    },
    
    _onTypeClick : function(event)
    {
      this.fireDataEvent("execute", "save-{0}".format(event.target.className.split("-")[1]));
      event.preventDefault();
    },
    
    // override
    _onButtonClick : function(event)
    {
      var type = event.target.className.split(" ")[0].split("-")[1];
      if(type == "clear")
      {
        this.base(arguments, event);
      }
      else
      {
        // defer to follow q(document).click
        qx.event.Timer.once(function()
        {
          this._element.find(".save-type-popup").setStyles({
            "left" : event.pageX + "px",
            "top"  : event.pageY + "px"
          }).show();
        }, this, 0);
        event.preventDefault();
      }
    }
    
  }
  
});